<script setup>
import { ref } from "vue";
import { store } from '../store/store.js'
import { useRouter } from 'vue-router';

const router = useRouter()
const showWords = ref([]);
fetch("/api/pinyin", {
  method: 'POST',
  mode: "cors",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ "msg": store.words }),
}).then(response => response.json()).then(data => showWords.value = data)
function back2Word() {
  router.push('/')
}
</script>
<template>
  {{ store.title }}
  <a-space direction="vertical" style="display: block;">
    <a-row class="grid-demo">
      <a-col :span="12" v-for="word in showWords">
        <div class="column" :style="{ marginTop: '20px', fontSize: '20px' }">
          {{ word }} : ________________
        </div>
      </a-col>
    </a-row>
  </a-space>
  <a-button type="primary" shape="round" class="float-button" @click="back2Word">
    返回
  </a-button>
</template>
<style scoped>
.float-button {
  position: fixed;
  /* 固定定位 */
  bottom: 20px;
  /* 距离底部的距离 */
  right: 20px;
  /* 距离右侧的距离 */
  z-index: 1000;
  /* 确保按钮在最上层，不会被其他内容遮挡 */
}
</style>
